

import React, { FC, useEffect, useState } from 'react'
import { connect } from 'dva'
import { PageContainer } from '@ant-design/pro-layout'
import { Button, message, Popconfirm, Space, Table, Tag } from 'antd'
import { ModelState } from './model'
import { ColumnsType } from 'antd/lib/table'
import { Dispatch } from 'umi'
import { IMenu } from './data'
import AddMenu from './components/addMenu'
import { deleteMenu, _moveUp } from './service'


export interface MenuIndexProps {
    list: IMenu[];
    dispatch: Dispatch;
}

type PartialMenu = Partial<IMenu>;

const MenuIndex: FC<MenuIndexProps> = ({ dispatch, list }) => {

    const columns: ColumnsType<IMenu> = [
        {
            title: '菜单名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '路由地址',
            dataIndex: 'path',
            key: 'path',
            width: '12%',
        },
        {
            title: '所属角色',
            dataIndex: 'roles',
            width: '',
            render: (text, record, index) => (
                <Space key={record.id}>
                    {record.roles.split(',').map((item) => (
                        <Tag color="#87d068" key={item}>{item}</Tag>
                    ))}
                </Space>
            ),
        },
        {
            title: '操作',
            dataIndex: '123',
            width: '20%',
            align: 'center',
            render: (text, record, index) => (
                <Space size={20} key={record.id}>
                    <Button type="primary" onClick={() => moveUp(record)}>
                        上移
        </Button>
                    <Button type="primary" onClick={() => editMenu(record)}>
                        修改
        </Button>
                    <Button type="primary" onClick={() => addSubMenu(record)}>
                        添加
        </Button>
                    <Popconfirm
                        title="您确定要删除此条菜单项吗？"
                        onConfirm={() => removeMenu(record)}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button danger>删除</Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    const [isShow, setIsShow] = useState(false);
    const [action, setAction] = useState('add');

    useEffect(() => {
        dispatch({
            type: 'menu/fetchList'
        })
    }, [])

    const addRootMenu = () => {
        setIsShow(true);
        setAction('add');
        dispatch({
            type: 'menu/setItem',
            payload: {},
        });
    };

    const removeMenu = async (record: IMenu) => {
        const res = await deleteMenu({ id: record.id });
        if (res.code === 200) {
            message.success({ content: '删除成功！' });
            dispatch({
                type: 'menu/fetchList',
            });
        }
    };

    const addSubMenu = (record: PartialMenu) => {
        record = { ...record };
        setIsShow(true);
        setAction('add');
        record.pName = record.name || '';
        record.pId = record.id;
        record.name = '';
        delete record.id;
        dispatch({
            type: 'menu/setItem',
            payload: record,
        });
    };

    const editMenu = (record:PartialMenu) => {
        record = { ...record };
        delete record.children;
        setIsShow(true);
        setAction('edit');
        dispatch({
            type: 'menu/setItem',
            payload: record,
        });
    };

    const moveUp = async (record: PartialMenu) => {
        const res = await _moveUp({ sort: record.sort, id: record.id, pId: record.pId });
        if (res.code === 200) {
            dispatch({
                type: 'menu/fetchList',
            });
        }
    };

    return (
        <>
            <PageContainer
                title={<div></div>}
                content={
                    <Button type="primary" onClick={() => addRootMenu()}>
                        新增根菜单
                    </Button>
                }

            >
                <Table columns={columns} dataSource={list} rowKey="id"></Table>
            </PageContainer>
            <AddMenu visible={isShow} action={action} close={() => setIsShow(false)}></AddMenu>
        </>
    )
}
const mapStateToProps = ({ menu }: { menu: ModelState }) => ({
    list: menu.list
})

export default connect(mapStateToProps)(MenuIndex);
